{% extends 'web/layout/manage.html' %}
{% load static %}

{% block title %}
    Project List
{% endblock %}

{% block css %}
    <style>
        .add-project-btn {
            padding-left: 20px;
        }

        .show-project-panel {
            width: 100%;
            margin: 20px;
        }

        .panel-body {
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .panel-body > .item {
            border-radius: 6px;
            width: 228px;
            border: 1px solid #dddddd;
            margin: 20px 10px;

        }

        .panel-body > .item:hover {
            border: 1px solid #f0ad4e;
        }

        .panel-body > .item > .title {
            height: 104px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            font-size: 15px;
            text-decoration: none;
        }

        .panel-body > .item > .info {
            padding: 10px 10px;

            display: flex;
            justify-content: space-between;

            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;

        }

        .panel-body > .item > .info a {
            text-decoration: none;
        }

        .panel-body > .item > .info .fa-star {
            font-size: 18px;
        }

        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 25px;
            width: 25px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }
    </style>
{% endblock %}

{% block content %}
    {#新增按钮区域#}
    <div class="add-project-btn">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addProjectModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>创建项目
        </button>
    </div>
    {# 项目列表页面板#}
    <div class="show-project-panel">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">星标项目</h3>
            </div>
            <div class="panel-body">
                {% for project in project_dict.star %}
                    <div class="item">
                        <a href="{% url 'dashboard' project_id=project.value.id %}" class="title"
                           style="background-color: {{ project.value.get_color_display }};">{{ project.value.name }}</a>
                        <div class="info">
                            <div>
                                <a href="{% url 'remove_star' project_type=project.type project_id=project.value.id %}">
                                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e;"></i>
                                </a>
                                <span>{{ project.value.creator.username }}</span>
                            </div>
                            <div>
                                <i class="fa fa-user-o" aria-hidden="true"></i>
                                <span>{{ project.value.join_count }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">我创建的</h3>
            </div>
            <div class="panel-body">
                {% for project in project_dict.create %}
                    <div class="item">
                        <a href="{% url 'dashboard' project_id=project.id %}" class="title"
                           style="background-color: {{ project.get_color_display }};">{{ project.name }}</a>
                        <div class="info">
                            <div>
                                <a href="{% url 'add_star' project_type='create' project_id=project.id %}">
                                    <i class="fa fa-star" aria-hidden="true" style="color:#BEBEBE;"></i>
                                </a>
                                <span>{{ project.creator.username }}</span>
                            </div>
                            <div>
                                <i class="fa fa-user-o" aria-hidden="true"></i>
                                <span>{{ project.join_count }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">我参与的</h3>
            </div>
            <div class="panel-body">
                {% for project in project_dict.join %}
                    <div class="item">
                        <a href="{% url 'dashboard' project_id=project.project.id %}" class="title"
                           style="background-color: {{ project.project.get_color_display }};">{{ project.project.name }}</a>
                        <div class="info">
                            <div>
                                <a href="{% url 'add_star' project_type='join' project_id=project.project.id %}">
                                    <i class="fa fa-star" aria-hidden="true" style="color:#BEBEBE;"></i>
                                </a>
                                <span>{{ project.project.creator.username }}</span>
                            </div>
                            <div>
                                <i class="fa fa-user-o" aria-hidden="true"></i>
                                <span>{{ project.project.join_count }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {#新建项目模态框#}
    <div class="modal fade" tabindex="-1" role="dialog" id="addProjectModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新建项目</h4>
                </div>
                <div class="modal-body">
                    <form id="addProjectForm" method="post" novalidate>
                        {% csrf_token %}
                        {% for field in add_project_form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">退 出</button>
                    <button type="button" class="btn btn-primary" id="addProSubmit">提 交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
{% endblock %}

{% block js %}
    <script>
        $(function () {
            addProSubmit();
        });

        function addProSubmit() {
            $('#addProSubmit').click(function () {
                $('.error-msg').empty();
                $.ajax({
                    url: '{% url 'project_list' %}',
                    type: 'POST',
                    data: $('#addProjectForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            console.log(res)
                            location.reload()
                        } else {
                            console.log(res.error); // {name:['项目已存在']}
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0])
                            })
                        }
                    }
                });
            });
        }
    </script>
{% endblock %}